<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <div><span style="color: red;">我</span>是谁?</div> -->
    <div class="box"></div>
    <script>
      // 将'我' 给高亮
      let str = "我是谁?我在哪?";
      const box = document.querySelector(".box");
      // 字符串有replace方法 进行替换
      // str.replace(替换字符,替换字符最终结果)
      // ---------------使用replace方法来替换  局限 只能替换一个---------------------------
      // let newstr = str.replace("我", '<span style="color: red;">我</span>');
      // console.log(newstr);
      // box.innerHTML = newstr;
      // ---------------使用replace方法来替换  replace方法的参数一可以写成正则表达式 ---------------------------
      // let newstr = str.replace(/我/g, '<span style="color: red;">我</span>');
      // box.innerHTML = newstr;
      // 正则中g是全局匹配 i是忽略大小写
      // let str2 = "aabbccAbA";
      // let newstr = str2.replace(/a/gi, '<span style="color: red;">a</span>');
      // box.innerHTML = newstr;
      // 以上可以实现全局替换,也可实现高亮---- 大小写 只会处理成一种情况
      //--------------------使用replace方法来替换-----------------------------------------------------

      let str3 = "abXXXabXXAAbxxxx";
      let keyword = "x";
      // 正则 /变量/ 中书写变量不会解析变量
      // const newstr = str3.replace(/${keyword}/gi, '<span style="color: red;">a</span>');
      // 正则创建有两种方式  字面量 reg = //   new构造函数  new RegExp('匹配的字符', '匹配的规则')
      const reg = new RegExp(keyword, "ig");
      // const newstr = str3.replace(reg, '<span style="color: red;">a</span>');
      // replace(正则, 函数(函数必须有返回值)) 函数中参数 习惯match是匹配到的字符
      const newstr = str3.replace(reg, function(match) {
        //match 就是正则匹配到的字符
        // console.log(match);
        return `<span style="color:red">${match}</span>`;
      });
      box.innerHTML = newstr;

      ('<span style="color: red;">a</span>== 2<span style="color: red;">a</span>==3 有可能是 true 吗？');
    </script>
  </body>
</html>
